<!--
<template>
  <div class="app-container">
    <u-page-config
      :filter-array="filterArray"
      v-model="filter"
      :actionBtn="actionBtn"
      label-width="100px"
      :getList="getList"
      :tableData="tableData"
      :tableColumn="tableColumn"
      :total="total"
      :loading="loading"
      showSelection
      @handleSelectionChange="handleSelectionChange"
      @addRow="addRow"
      @removeRow="removeRow"
      @editRow="editRow"
      @rowDetail="rowDetail"
    >

      <template #orderStatus="{row, item}">
        {{ getDictLabel(orderStatusOptions, row.orderStatus) }}
      </template>
    </u-page-config>

    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="650px"
      :close-on-click-modal="false"
    >
      <u-form
        ref="uFormRef"
        label-width='134px'
        v-model="form"
        :defaultForm="defaultForm"
        :formArray="formArray"
        :show-btn="false"
        @submit="onsubmit"
        @close="visible = false"
        :mode="mode"
      >
        <template #deviceId="scope">
          <div class="form-item-wrap">
            <el-input
              placeholder="请输入设备ID或者点击选择设备按钮"
              v-model="form[scope.row.key]"
              style="flex: 1;margin-right: 10px;"
              clearable
              @blur="checkDeviceId"
            >
            </el-input>
            <el-button icon="el-icon-search" type="primary" @click="showSelectDeviceView">选择设备</el-button>
          </div>
        </template>

        <template #image="scope">
          <u-file-upload
            :value="form.image"
            :limit="3"
            :fileSize="10"
            @input="imageUploadChange"
          />
        </template>
      </u-form>
    </el-dialog>
  </div>
</template>

<script>
import UPageConfig from '@/components/uPageConfig/index'
import UForm from '@/components/uForm'
import table from "@/mixin/uTable";
import {
  getWorkOrderList,
  addWorkOrder,
  updateWorkOrder,
  WorkOrderDetail,
  deleteWorkOrder
} from '@/api/operationAndMonitoring/workOrder'
import {listManager} from "@/api/device/placeManager";
// import FillFormDialog from "@/views/device/adapterManagement/components/fillFormDialog";

export default {
  name: "UpdatePlan",
  mixins: [table],
  components: {UPageConfig, UForm},
  data() {
    return {
      // 工单状态（0未处理、1处理完成、2不需要处理
      orderStatusOptions: [
        {label: '未处理', value: 0},
        {label: '处理完成', value: 1},
        {label: '不需要处理', value: 2},
      ],
      filterArray: [
        {label: "设备部署名称", key: "deploymentName", type: "input"},
        {label: "工单状态", key: "orderStatus", type: "select", options: []},
        {label: "所属运维人员", key: "operationUserCode", type: "select", options: []},
        // @prop: noRequestParams：调用getList接口时是否不需要该参数
        {label: "创建时间", key: "daterange", type: "daterange", noRequestParams: true},
      ],
      tableColumn: [
        {label: "工单ID", prop: "id"},
        {label: "设备ID", prop: "deviceId"},
        {label: "设备部署名称", prop: "deploymentName"},
        {label: "异常内容", prop: "message"},
        {label: "生成时间", prop: "createTime", type: 'slot', slot: 'createTime'},
        {label: "处理状态", prop: "orderStatus", type: 'slot', slot: 'orderStatus'},
        {
          label: "操作", type: "btn", attr: {width: 180}, btnArr: [
            {icon: "el-icon-view", text: "详细", emit: "rowDetail"},
            {
              icon: "el-icon-edit-outline",
              text: "处理工单",
              emit: "resolveWorkOrder",
              permissions: 'operationAndMonitoring:workOrder:resolve'
            },
            {
              icon: "el-icon-edit-outline",
              text: "修改",
              emit: "editRow",
              permissions: 'operationAndMonitoring:workOrder:edit'
            },
            {
              icon: "el-icon-delete",
              text: "删除",
              emit: "removeRow",
              permissions: 'operationAndMonitoring:workOrder:remove'
            },
          ]
        }
      ],
      actionBtn: [
        {
          type: 'primary',
          text: '创建工单',
          icon: 'el-icon-plus',
          emit: 'addRow',
          permissions: 'operationAndMonitoring:workOrder:add'
        },
        {
          type: 'success',
          text: '修改',
          icon: 'el-icon-edit',
          emit: 'editRow',
          permissions: 'operationAndMonitoring:workOrder:edit',
          disabledRule: () => this.ids.length !== 1
        },
        {
          type: 'danger',
          text: '删除',
          icon: 'el-icon-delete',
          emit: 'removeRow',
          permissions: 'operationAndMonitoring:workOrder:remove',
          disabledRule: () => this.ids.length === 0
        },
        {
          type: 'warning',
          text: '导出',
          icon: 'el-icon-download',
          emit: 'handleExport',
          permissions: 'operationAndMonitoring:workOrder:export'
        },
      ],
      // 表单默认必填参数 重置表单时需要用到
      defaultForm: {
        deviceId: '',
        deploymentName: '',
        deploymentCode: '',
        operationUserCode: '',
        message: '',
        image: '',
        reportName: '',
        reportPhone: '',
      },
      formArray: [
        {
          label: "设备ID：", key: "deviceId", col: 24, slot: "deviceId",
          rule: {required: true, message: '设备ID不能为空！', trigger: 'blur'},
        },
        {label: "设备部署名称：", key: "deploymentName", col: 24, type: "input", attr: {disabled: true}},
        {
          label: "运维人员：", key: "operationUserCode", col: 24, type: "select", options: [],
          rule: {required: true, message: '运维人员不能为空！', trigger: 'change'},
        },
        {
          label: "问题描述：", key: "message", col: 24, type: "input",
          rule: {required: true, message: '问题描述不能为空！', trigger: 'blur'},
        },
        {label: "照片：", key: "image", col: 24, slot: "image"},
        {
          label: "报障人联系电话：", key: "reportName", col: 24, type: "input",
          rule: {required: true, message: '报障人联系电话不能为空！', trigger: 'blur'},
        },
        {
          label: "报障人姓名：", key: "reportPhone", col: 24, type: "input",
          rule: {required: true, message: '报障人姓名不能为空！', trigger: 'blur'},
        },
      ],
      // 查看详情表单配置
      detailArray: [
        {
          label: "设备ID：", key: "deviceId", col: 24, type: "text",
        },
        {label: "设备部署名称：", key: "deploymentName", col: 24, type: "text", placeholder: ' '},
        {
          label: "运维人员：", key: "operationUserCode", col: 24, type: "select", options: [],
        },
        {label: "问题描述：", key: "message", col: 24, type: "text", attr: {resize: 'none'}},
        {label: "照片：", key: "image", col: 24, type: "img"},
        {
          label: "报障人联系电话：", key: "reportPhone", col: 24, type: "text",
        },
        {
          label: "报障人姓名：", key: "reportName", col: 24, type: "text",
        },
      ],
    };
  },
  methods: {
    // 表单提交接口相关配置
    formSubmitFunConfig() {
      return {
        addFunc: addWorkOrder,
        modifyFunc: updateWorkOrder,
        pk: 'id',
        options: {
          ...this.form,
          deploymentCode: "deploymentCode"
        },
        cbFunc: () => {
          this.visible = false
        }
      }
    },
    // 删除
    removeRow(row) {
      const id = row ? row.id : this.ids;
      this.removeTip(async () => {
        await deleteWorkOrder(id)
      }, row && row.id ? '该项数据' : '已勾选项数据')
    },
    // 添加
    addRow() {
      this.mode = 'form';
      this.title = "添加工单";
      this.visible = true;
    },
    // 修改
    async editRow(row) {
      this.mode = 'form'
      this.title = "修改工单";
      if (row) { //点击的表格内修改按钮
        this.form = JSON.parse(JSON.stringify(row))
      } else { //点击表格上方修改按钮
        const selectedItem = this.tableData.find(item => this.ids[0] === item.id) || {}
        this.form = JSON.parse(JSON.stringify(selectedItem))
      }
      this.visible = true
      await this.$nextTick()
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
    },
    // 选择设备列表弹窗 选择设备回调
    handleSelectDevice(deviceInfo) {
      this.form.deviceId = deviceInfo.deviceId;
      this.form.deploymentCode = deviceInfo.deploymentCode;
      this.form.deploymentName = deviceInfo.deploymentName;
      // console.log(this.form)
    },
    // 添加文件上传成功、删除图片时都会被调用
    imageUploadChange(imgUrl) {
      this.form.image = imgUrl
    },
    /** 查询工单列表 */
    getList() {
      this.getInit(getWorkOrderList, {})
    },
    /** 详细按钮操作 */
    rowDetail(row) {
      this.mode = 'text'
      // 直接拿到这一行的数据赋值
      this.form = row;
      this.visible = true
      this.title = '详细信息'
      // 如果当前行数据不完整 调接口拿详情数据
      // this.getDetail('详细信息', WorkOrderDetail, row.id)
    },
    /** 返回设备部署页面 */
    goBack() {
      this.$router.go(-1);
    },
    /** 导出按钮操作 */
    handleExport() {
      const currentDate = this.parseTime(new Date());
      const ids = this.ids;
      const params = this.getListRequestParams();
      this.download(
        "xxx/xxx/export",
        params,
        `工单列表_${currentDate}.xlsx`,
      );
    },
  },
  created() {
  }
}
</script>

<style lang="scss" scoped>
.form-item-wrap {
  display: flex;
}
</style>
-->
